<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/iconfont.css" />
</head>
<body>
	<div class="mui-content">
		实现效果: <br />1>原生的导航 (在manifest.json里面plus配置原生导航) <br />
				2>原生的导航上绘制 按钮, 并且添加点击事件 <br />
				3>原生的webview窗口侧滑(拖动效果实现) <br />
		    
	</div>
</body>
<script src="js/mui.min.js"></script>
<!--<script src="js/base64.min.js"></script>-->
<script type="text/javascript" charset="utf-8">
	/*base64使用demo
	console.log(Base64.encode('dankogai'));  // ZGFua29nYWk=   
	console.log(Base64.encode('小飼弾'));    // 5bCP6aO85by+
	console.log(Base64.encodeURI('小飼弾')); // 5bCP6aO85by-
	
	console.log(Base64.decode('ZGFua29nYWk='));  // dankogai
	console.log(Base64.decode('5bCP6aO85by+'));  // 小飼弾
	// note .decodeURI() is unnecessary since it accepts both flavors
	console.log(Base64.decode('5bCP6aO85by-'));  // 小飼弾*/
	
	
	/**
	 * 将图片转换为Base64
	 */
	function image2Base64(img) {
	    var canvas = document.createElement("canvas");
	    canvas.width = img.width;
	    canvas.height = img.height;
	    var ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0, img.width, img.height);
	    var dataURL = canvas.toDataURL("image/png");
	    return dataURL;
	}
	/**
	 * 获取图片的base64 编码
	 */
	var base64 = "";
	function getImgBase64() {
		var img = new Image();
		img.src = "images/search@3x.png";
		img.onload = function () {
			base64 = image2Base64(img); //获取图片的64位编码
		}
	}
	getImgBase64();
	
	
	
	
  	mui.init();
  	var _self, nav, menu;
  	mui.plusReady(function () {
  		_self = plus.webview.currentWebview();
  		//1.首先先获取到当前的窗口,然后才能在它上面
  		//绘制左上角的小图标
  		nav = _self.getNavigationbar();
  		
  		//2.创建Bitmap对象
  		var bitmap_search = new plus.nativeObj.Bitmap('search');
  		
  		//3.填充图片
  		bitmap_search.loadBase64Data(base64);
  		
  		//4.绘制到导航上
  		nav.drawBitmap(bitmap_search, {}, {
  			top: '10px',
  			left: '10px',
  			width: '24px',
  			height: '24px'
  		})
  		
  		//5.绑定点击
  		nav.interceptTouchEvent(true)//点击开始 
  		
  		nav.addEventListener('click', function(e) {
  			if (e.clientX <= 44) {
  				var _left = parseInt(_self.getStyle().left);
  				console.log(_left);
  				if (_left > 10) {
  					closeMenu();
  				} else {
	  				plus.webview.startAnimation({//
	  					view: menu,       //
	  					styles: {fromLeft: '-70%', toLeft: '0'}
	  				}, {
						view: _self,
						styles: {formLeft: '0', toLeft: '70%'}
	  				})
  				}
  			}
  		})
  		if (mui.os.ios){menu_style.zIndex = -1;}
  		//处理侧滑导航, 为了避免和子页面初始化等竞争资源, 延迟加载侧滑页面
  		//创建菜单
  		var menu_style = {
  			width: '70%',
			left: '-70%',
			popGesture: 'none',
			render: 'always'
  		}
  		menu = mui.openWindow({
  			id: 'menu.html',
  			url: 'menu.html',
  			styles: menu_style,
			show: {
				aniShow: 'none'
			},
			waiting: {
				autoShow: false
			}
  		});
  		_self = plus.webview.currentWebview();
  		setTimeout(function () {
			//确保菜单页创建好
  			_self.drag({
  				direction: 'right',
  				moveMode: 'followFinger' //_self跟随手指的方向
  			}, {
				view: menu,
				moveMode: 'follow' //视图 menu页 跟随 _self页的移动
  			})
  		}, 500)
  		
  	});
  	function closeMenu() {
  		plus.webview.startAnimation({
			view: menu,      
			styles: {fromLeft: '0', toLeft: '-70%'}
		}, {
			view: _self,
			styles: {formLeft: '70%', toLeft: '0'}
		})
  	}
</script>
</html>